//
//  KLMSliderControlView.swift
//  KLM_GN
//
//  Created by Nic on 2025/3/5.
//

import UIKit

class KLMSliderControlView: UIView {
    

}

class VerticalControlView: UIView {
    // MARK: - 配置接口
    typealias ValueChangedBlock = (_ value: CGFloat, _ control: VerticalControlView) -> Void
    // 值变化回调（携带自身实例）
    var valueChanged: ValueChangedBlock?
    var valueEndChanged: ValueChangedBlock?
    
    // MARK: - 原有实现
    var value: CGFloat = 0.0 {
        didSet {
            updateDisplay()
            valueChanged?(value, self)  // 携带自身实例方便识别
        }
    }
    var type: String = "" {
        didSet { updateDisplay() }
    }
    var unit: String = "%" {
        didSet { updateDisplay() }
    }
    var iconName: String = "" {
        didSet { iconImageView.image = UIImage(named: iconName) }
    }
    
    // 代码初始化（基础方法）
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    // xib/storyboard初始化（基础方法）
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    // 便利初始化方法（代码创建时快速配置）
    convenience init(
        frame: CGRect = .zero,
        type: String = "",
        value: CGFloat = 0.3,
        unit: String = "%",
        iconName: String = ""
    ) {
        self.init(frame: frame)
        self.type = type
        self.value = value
        self.unit = unit
        self.iconName = iconName
        configure(type: type, value: value, unit: unit, iconName: iconName)
    }
    
    // 公共初始化配置
    private func commonInit() {
        setupUI()
        setupGesture()
        updateDisplay()
    }
    // 确保xib中的修改生效
    override func awakeFromNib() {
        super.awakeFromNib()
        updateDisplay()
        setNeedsLayout()
    }
    // UI元素
    let gradientLayer = CAGradientLayer()
    let titleLabel = UILabel()
    let iconImageView = UIImageView()
    let indictorView = UIView()
    
    // 手势识别
    private var initialTouchY: CGFloat = 0
    private var initialValue: CGFloat = 0
    
    // 公共配置方法
    func configure(type: String? = nil,
                   value: CGFloat = 0.3,
                   unit: String? = nil,
                   iconName: String? = nil) {
        if let type = type { self.type = type }
        if value != 0.3 { self.value = value }
        if let unit = unit { self.unit = unit }
        if let iconName = iconName { self.iconName = iconName }
        
        updateDisplay()
        setNeedsLayout()
    }
    
    // 颜色配置
    func setGradientColors(start: UIColor, end: UIColor) {
        gradientLayer.colors = [start.cgColor, end.cgColor]
    }
    
    private func setupUI() {
        backgroundColor = rgba(242, 242, 242, 1)
        layer.cornerRadius = 16
        clipsToBounds = true
        
        // 渐变层配置
        gradientLayer.cornerRadius = 0
        gradientLayer.colors = [
            rgba(250, 137, 2, 1).cgColor,
            rgba(255, 248, 239, 1).cgColor
        ]
        gradientLayer.locations = [0, 1]
        layer.addSublayer(gradientLayer)
        
        // 图标
        iconImageView.image = UIImage(named: "light")
        iconImageView.contentMode = .scaleAspectFill
        addSubview(iconImageView)
        
        indictorView.backgroundColor = .white
        addSubview(indictorView)
    }
    
    private func setupGesture() {
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
        self.addGestureRecognizer(panGesture)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // 渐变层布局
        let gradientHeight = bounds.height * value
        gradientLayer.frame = CGRect(
            x: 0,
            y: bounds.height - gradientHeight,
            width: bounds.width,
            height: gradientHeight
        )
        indictorView.frame = CGRect(x: (bounds.width - 18)*0.5, y: bounds.height - gradientHeight + 6, width: 18, height: 2)
        
        // 标签布局
        titleLabel.frame = CGRect(x: 0, y: 36, width: bounds.width, height: 16)
        iconImageView.frame = CGRect(x: bounds.width/2-12, y: bounds.height-40, width: 24, height: 24)
    }
    
    private func updateDisplay() {
        setNeedsLayout()
        // 渐变动画
        UIView.animate(withDuration: 0.2) {
            self.gradientLayer.opacity = self.value > 0.1 ? 1.0 : 0.8
        }
    }
    
    @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
        
        switch gesture.state {
        case .began:
            initialTouchY = gesture.location(in: self).y
            initialValue = value
        case .changed:
            let delta = (initialTouchY - gesture.location(in: self).y) / bounds.height
            value = max(0, min(1, initialValue + delta))
        case .ended:
            let delta = (initialTouchY - gesture.location(in: self).y) / bounds.height
            let endValue = max(0, min(1, initialValue + delta))
            valueEndChanged?(endValue, self)
        default:
            break
        }
    }
}

class KLMTViewController: UIViewController {
    
    let brightnessControl = VerticalControlView()
    let temperatureControl = VerticalControlView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupControls()
    }
    
    private func setupControls() {
        
        // 创建亮度滑块
        let brightnessSlider = KLMVerticalSliderView()
        brightnessSlider.minValue = 0
        brightnessSlider.maxValue = 100
        brightnessSlider.step = 1
        brightnessSlider.unit = "%"
        brightnessSlider.iconName = "light"
        brightnessSlider.frame = CGRect(x: 50, y: 100, width: 60, height: 200)

        // 创建色温滑块
        let temperatureSlider = KLMVerticalSliderView()
        temperatureSlider.minValue = 2700
        temperatureSlider.maxValue = 6500
        temperatureSlider.step = 100
        temperatureSlider.unit = "K"
        temperatureSlider.iconName = "dark"
        temperatureSlider.frame = CGRect(x: 150, y: 100, width: 60, height: 200)

        view.addSubview(brightnessSlider)
        view.addSubview(temperatureSlider)
    }
}


